<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">成药/草药</el-breadcrumb-item>
      <el-breadcrumb-item>活动管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-input placeholder="请输入内容" clearable @clear="searchName()" @keyup.enter.native="searchName()"
              class="input-with-select" v-model="inputValue">
              <el-button slot="append" @click="searchName()">搜索</el-button>
            </el-input>
          </div>
        </el-col>
      </el-row>
      <!-- 列表区域 -->
      <el-table :data="tabList" :height="autoHeight" border stripe style="width: 100%" @row-click="getInfo">
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="name" label="名称" width="180">
        </el-table-column>
        <el-table-column prop="infoZlly" label="出处" width="240">
        </el-table-column>
        <el-table-column prop="updateTime" label="更新日期">
          <template slot-scope="scope">
            {{ scope.row.updateTime|dateFormat }}
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
        :page-sizes="[20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { get, post } from '../plugin/axios'
export default {
  name: 'templates',
  props: {
    activePath: {
      type: null,
      default: null
    }
  },
  data() {
    return {
      inputValue: '',
      tabList: [],
      total: 0,
      autoHeight: null,
      page: 1,//页数
      pageSize: 20,//每页条数
    }
  },
  watch: {
    activePath: {
      handler(newVal, oldVal) {
        this.tabList = []
        this.total = 0
        this.page = 1
        this.pagesize = 20
        this.getList();
      },
      // 代表在wacth里声明了combineVal这个方法之后立即先去执行handler方法
      immediate: true
    }
  },
  created() {
    this.autoHeight = window.innerHeight * 0.58 + 'px'
  },
  computed: {
    ...mapState(['info'])
  },
  mounted() {
    // / 监听浏览器窗口变化，动态计算表格高度，
    window.onresize = () => {
      return (() => {
        this.autoHeight = window.innerHeight * 0.58 + 'px'
      })()
    }
  },
  methods: {
    getList() {
      var param = {}
      let url = ''
      //判断activePath值调用不同接口，获取不同数据
      switch (this.activePath) {
        case '102':
          param = {
            status: null,
            name: this.inputValue,
            size: this.pageSize,
            type: 3,
            origin_type: 'baidubaike/diseaseZy/diseaseXy/symptomZy/symptomXy',
            symptom_zy_batch: null,
            symptom_xy_batch: null,
          }
          url = '/abc/xybz/data_all_zxy/getPartList'
          break;
        case '103':
          param = {
            status: null,
            name: this.inputValue,
            size: this.pageSize,
            type: 4,
            origin_type: 'baidubaike/diseaseZy/diseaseXy/symptomZy/symptomXy',
            symptom_zy_batch: null,
            symptom_xy_batch: null,
          }
          url = '/abc/xybz/data_all_zxy/getPartList'
          break;
        case '202':
          param = {
            rows: this.pageSize,
            name: encodeURI(this.inputValue),
            type: 1,
          }
          url = '/abc/yyjk/disease/list'
          break;
        case '203':
          param = {
            rows: this.pageSize,
            name: encodeURI(this.inputValue),
            type: 0,
          }
          url = '/abc/yyjk/disease/list'
          break;
        case '302':
          param = {
            rows: this.pageSize,
            name: encodeURI(this.inputValue),
            type: 1,
          }
          url = '/abc/yyjk/medicine/list'
          break;
        case '303':
          param = {
            rows: this.pageSize,
            name: encodeURI(this.inputValue),
          }
          url = '/abc/yyjk/herbal/list'
          break;
        case '304':
          param = {
            rows: this.pageSize,
            name: encodeURI(this.inputValue),
            type: -1,
          }
          url = '/abc/yyjk/medicine/list'
          break;
        default:
          break;
      }
      param.page = this.page
      get(url, param).then(res1 => {
        if (url.indexOf('yyjk') > -1) {
          let rows = res1.rows;
          rows.forEach(item => {
            item.name = item.infoYm || item.info_name
          });
          this.tabList = rows
          this.total = res1.records
        } else {
          res1.list.forEach(item => {
            item.name = item.info_name
          });
          this.tabList = res1.list
          this.total = res1.totalNum
        }
      })
    },
    //每页条数改变时触发
    handleSizeChange(newsize) {
      console.log(newsize)
      this.pageSize = newsize
      this.getList()
    },
    //页数发生改变时触发
    handleCurrentChange(newpage) {
      console.log(newpage)
      this.page = newpage
      this.getList()
    },
    //搜索事件
    searchName() {
      this.page = 1
      this.getList()
    },
    //点击列表数据，查看详情
    getInfo(row, column, event) {
      this.$store.commit('setInfo', row)
      console.log(this.info)
      window.sessionStorage.setItem('infoData',this.$qs.stringify(row))
      this.$router.push('/info')
      //window.open('/info','_blank')
    },
  }
}
</script>
<style lang="less" scoped></style>